<template>
  <div class="box">
    <header class="header">
      <van-nav-bar @click-left="onRight" @click-right="$router.push('kind')">
        <template #left>
          <van-icon name="friends"  v-if='isL' size="24"/>
        <span v-else>登录</span>
        </template>
        <template #title>
          <van-button round type="disabled " icon="search" @click="$router.push('/search')">请输入要搜索的内容</van-button>
        </template>
        <template #right>
          <van-icon name="apps-o" size="24"  />
        </template>
      </van-nav-bar>
    </header>
  <!--  <van-tabs>
      <van-tab v-for="index in 8" :title="'标签 ' + index">
        内容 {{ index }}
      </van-tab>
      </van-tabs> -->
    <div class="content" ref="cont">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.imgId">
          <van-image width="100%" height="100%" fit="cover" :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="4">
        <van-grid-item v-for="val in navList" :key="val.text" :icon="val.icon" :text="val.text" />
      </van-grid>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <van-card
        v-for="item in proList"
        :key="item.proId"
        :num="item.stock"
        :price="item.price"
        :desc="item.introduce"
        :title="item.proName"
        :thumb="item.proImg1"
        @click="fn(item.proId)"
      />
      </van-list>
      </van-pull-refresh>
        <van-icon name="back-top" class="totop"  v-show="flag" @click="gotoTop" size="24"/>
        <div class="footer">
          <van-icon name="manager-o" size="24" @click="$router.push('My')"/>
          <!-- <van-icon name="manager-o" /> -->
          <van-icon name="shopping-cart-o" size="24"  @click="$router.push('/cart')"/>
        </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Button, Tab, Tabs, Swipe, SwipeItem, Image as VanImage, Grid, GridItem, List, PullRefresh, card } from 'vant'
import { getBanner, getNav, getPro } from '../../api/index'
import { mapState } from 'vuex'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Button)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(VanImage)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(card)
  export default {
    data () {
      return {
        // activeName: 'a',
        iconArr: [
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/89/1603977088479_96x96_90.png',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/16/1603977092552_96x96_90.png',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/1/1603977096500_96x96_90.png',
          'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/10/1603977111908_96x96_90.png',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/16/1603977092552_96x96_90.png',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/94/1603977103739_96x96_90.png',
          'https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/10/29/49/1603977115883_96x96_90.png'
        ],
        bannerList: [],
        navList: [],
        proList: [],
        loading: false,
        finished: false,
        i: 0,
        isLoading: true,
        flag: false,
        isL: true
}
    },
    created () {
      getBanner().then(res => {
        this.bannerList = res.data.data
        // console.log(this.bannerList = res.data.data)
      })
      getNav().then(res => {

        const arrs = res.data.data
        const arr =[...arrs, ...['鞋包', '户外运动', '眼镜']]
        arr.length = 8
        arr.forEach((val, idx) => {
          this.navList.push({
            icon: this.iconArr[idx],
            text: val
          })
        })
      })
    },
    methods: {
      onLoad () {
            // 异步更新数据
            getPro({ index: this.i++, num: 10 }).then(res => {
              // this.proList = this.proList.concat(res.data.data);
              this.proList = [...this.proList, ...res.data.data]
              this.loading = false
              if (res.data.data.length < 1) {
                this.finished = true
              }
            })
          },
          onRefresh () {
            this.i = 0
            getPro({ index: 0, num: 10 }).then(res => {
              this.proList = res.data.data
              this.isLoading = false
            })
          },
          gotoTop () {
            this.$refs.cont.scrollTop = 0
          },
          fn (proId) {
            this.$router.push('/detail/' + proId)
          },
          onRight () {
            if (this.$store.state.user.isLogin === 'ok') {
              this.$router.push('/my')
            } else {
              this.$router.push('/login?t=/index')
            }
          }
        },

        mounted () {
          if (this.$store.state.user.isLogin === 'ok') {
            this.isL = true
          } else {
            this.isL = false
          }
          // console.log(this.$refs.cont)
          const that = this
          this.$refs.cont.addEventListener('scroll', () => {
            // console.log(that.$refs.cont.scrollTop)
            if (this.$refs.cont.scrollTop > 500) {
              this.flag = true
            } else {
              this.flag = false
            }
          })

        }
  }
</script>

<style lang="scss" >

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  .box {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .header {
      height: 0.4rem;
      text-align: center;
      font: 0.24rem/0.4rem "";
      .van-nav-bar__title{
        width:65%;
        max-width:65%;
      }
      .van-button{
        width:100%;
        height:0.3rem;
        color: #aaa;
        border-color: #aaa;
      }
      .van-nav-bar {
        height: 0.4rem;
      }
      .van-nav-bar__left{
        font-size: 18px;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      height: 100%;
      .my-swipe .van-swipe-item {
        width: 3.75rem;
        height: 2rem;
      }
      .van-tabs {
        flex: 1;
      }
      .van-tabs__wrap  {
        display: flex;
        flex: 1;
      }
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
      .totop{
        position: fixed;
        bottom: 0.5rem;
        right: 0.2rem;
        background:#1C2529;
        padding: 0.05rem;
        border-radius: 50%;
        color: #FFFFFF;
      }
      .footer{
        background: #1C2529;
        position: fixed;
        bottom: 0.5rem;
        left: 0.2rem;
        border-radius:0.15rem ;
        .van-icon-manager-o{
         color: #fff;
         margin: 0.05rem 0.1rem 0.05rem 0.1rem;
        }
        .van-icon-shopping-cart-o{
         color: #fff;
         margin: 0.05rem 0.1rem 0.05rem 0.1rem;
       }
      }
    }
  }
 }

</style>
